<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>支付宝通道申请</title>

    <link rel="stylesheet" href="../../../../bangnuo/css/operation/add_merchants_new.css">

    <script src="../../../../bangnuo/vue/vue.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../../../../bangnuo/bootstrap/js/jquery-3.4.1.js"></script>
    <script src="../../../../bangnuo/vue/axios.min.js"></script>
    <style>
        .main-body {
            width: 80%;
            margin: 0 auto;
        }

        .el-input-class {
            width: 221px;
            margin: 10px 10px;
        }

        .table-main-class {

        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
    <script type="module" src="../../operation/js/config/public.js"></script>
</head>
<body>
<div id="app">
    <div class="main-body">
        <div class="input-header">
            商户编号：&nbsp;&nbsp;&nbsp;
            <el-input v-model="form.number" placeholder="请输入商户编号" class="el-input-class"></el-input>
            <br/>
            公司名称：&nbsp;&nbsp;&nbsp;
            <el-input v-model="form.companyName" placeholder="请输入公司名称" class="el-input-class"></el-input>
            <br/>
            <!--审核状态：&nbsp;&nbsp;&nbsp;
            <el-input v-model="form.status" placeholder="请输入公司名称" class="el-input-class"></el-input>
            <br/>-->

            支付宝账号：&nbsp;&nbsp;
            <el-input v-model="form.aliPayNumber" placeholder="请输入支付宝账号" class="el-input-class"></el-input>
            <br/>
            营业执照注册号：
            <el-input v-model="form.businessNumber" placeholder="请输入营业执照注册号" class="el-input-class"></el-input>
            <br/>
            营业执照照片&nbsp;：
            <el-upload
                    class="avatar-uploader"
                    action="/upload/image/businessLicense"
                    name="imgFile"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess1"
                    :before-upload="beforeAvatarUpload">
                <!--用于上传图片预览-->
                <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
                <!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <br/>
            资质许可证照片(选填)：
            <el-upload
                    class="avatar-uploader"
                    action="/upload/image/qualificationLicense"
                    name="imgFile"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess2"
                    :before-upload="beforeAvatarUpload">
                <!--用于上传图片预览-->
                <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
                <!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <br/>
            店铺招牌照片&nbsp;：
            <el-upload
                    class="avatar-uploader"
                    action="/upload/image/shopPhotos"
                    name="imgFile"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess3"
                    :before-upload="beforeAvatarUpload">
                <!--用于上传图片预览-->
                <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
                <!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

            <br/>
            联系人姓名：&nbsp;&nbsp;
            <el-input v-model="form.adminName" placeholder="请输入姓名" class="el-input-class"></el-input>
            <br/>
            联系人手机号：&nbsp;
            <el-input v-model="form.adminPhone" placeholder="请输入手机号" class="el-input-class"></el-input>
            <br/>
            联系人邮箱：&nbsp;&nbsp;
            <el-input v-model="form.adminEmail" placeholder="请输入邮箱" class="el-input-class"></el-input>
            <br/>
            申请费率：&nbsp;&nbsp;&nbsp;
            <el-input v-model="form.rate" placeholder="请输入申请费率" class="el-input-class"></el-input>
            <br/>

            <el-button type="primary" @click="onSubmit">提交</el-button>
        </div>
    </div>

</div>
<script type="module">
    import bnApi from '../../operation/js/config/public.js';

    var vue = new Vue({
        el: '#app',
        data: {
            form: {
                rate: "",//汇率
                adminEmail: "",
                adminPhone: "",
                adminName: "",
                number: "",
                companyName: "",
                status: "",
                aliPayNumber: "",
                businessNumber: "",
                imageUrl1: "",
                imageUrl2: "",
                imageUrl3: "",
                type: "2",//支付宝，
                commercialId: ""

            },
            imageUrl1: "",
            imageUrl2: "",
            imageUrl3: "",
            input: '',
        },
        methods: {
            onSubmit() {
                bnApi.requestPost("/commercial/channel", this.form).then(res => {

                    if (res.success) {
                        this.$message.success("申请成功待审核");

                    } else {
                        this.$message.error("申请失败");
                    }
                });
            },

            handleAvatarSuccess1(response, file) {
                //给模型数据赋值，进行图片的预览
                alert(response)
                this.imageUrl1 = response.object.path;
                this.form.imageUrl1 = response.object.path;
                //this.imageUrl = "D:\\IdeaProject\\demo\\springcloud\\springcloudDemo\\pic-upload\\src\\main\\resources\\static\\img\\" + response.data;

                if (response.data.success) {
                    this.$message.success("上传成功")
                } else {
                    this.$message.error("上传失败")
                }
                //设置数据模型赋值（文件名字），是为了在提交表单时，发送ajax请求，要把图片的名称会提交到后台，然后保存到数据库（保存的也只是图片的名字）
            },
            handleAvatarSuccess2(response, file) {
                //给模型数据赋值，进行图片的预览
                alert(response)
                this.imageUrl2 = response.object.path;
                this.form.imageUrl2 = response.object.path;
                //this.imageUrl = "D:\\IdeaProject\\demo\\springcloud\\springcloudDemo\\pic-upload\\src\\main\\resources\\static\\img\\" + response.data;

                if (response.data.success) {
                    this.$message.success("上传成功")
                } else {
                    this.$message.error("上传失败")
                }
                //设置数据模型赋值（文件名字），是为了在提交表单时，发送ajax请求，要把图片的名称会提交到后台，然后保存到数据库（保存的也只是图片的名字）
            }, handleAvatarSuccess3(response, file) {
                //给模型数据赋值，进行图片的预览
                alert(response)
                this.imageUrl3 = response.object.path;
                this.form.imageUrl3 = response.object.path;
                //this.imageUrl = "D:\\IdeaProject\\demo\\springcloud\\springcloudDemo\\pic-upload\\src\\main\\resources\\static\\img\\" + response.data;

                if (response.data.success) {
                    this.$message.success("上传成功")
                } else {
                    this.$message.error("上传失败")
                }
                //设置数据模型赋值（文件名字），是为了在提交表单时，发送ajax请求，要把图片的名称会提交到后台，然后保存到数据库（保存的也只是图片的名字）
                this.formData.img = response.data;
            },
            //上传图片之前执行,只是对选中的图片的后缀名进行校验
            //file就是上传的文件
            beforeAvatarUpload(file) {
                // 可以在tomcat的conf的web.xml中找到相对应的文件类型
                var isJPG = file.type === 'image/jpeg' || "image/gif" || "image/png";

                var isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传套餐图片只能是 JPG或者gif或者png 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传套餐图片大小不能超过 50kb!');
                }
                return isJPG && isLt2M;
                return isLt2M;
            },
            getQueryVariable: function (variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return (false);
            },
            queryById: function () {
                bnApi.requestPost("/commercial/findByIdAndType/" + this.form.commercialId).then(res => {
                    if (res.success) {
                        for (let i = 0; i <res.queryResult.list.length; i++) {
                           if (res.queryResult.list[i].type==2){
                               this.form=res.queryResult.list[i];
                           }
                        }
                    }
                });
            }
        },
        mounted() {
            this.form.commercialId = this.getQueryVariable("id");
            this.queryById();
        }
    })
</script>
</body>


</html>